<script lang="ts" setup>
import type { LoginLog } from '@vben/types';

import type { VxeGridProps } from '#/adapter/vxe-table';
import type { LoginLogApi } from '#/api/system-manage/login-log';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getLoginLogApi } from '#/api/system-manage';

const logData = ref<LoginLogApi.LoginLogResult>();

/**
 * 表格的参数设置
 */
const gridOptions: VxeGridProps<LoginLog> = {
  columns: [
    { title: '序号', type: 'seq' },
    { field: 'username', title: '用户名' },
    { field: 'ip', title: 'IP地址' },
    { field: 'port', title: '端口' },
    { field: 'loginMode', title: '登录模式' },
    { field: 'result', title: '登录结果', slots: { default: 'result' } },
    { field: 'source', title: '登录来源' },
    { field: 'loginTime', title: '登录时间' },
  ],
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        if (logData.value === undefined) {
          logData.value = await getLoginLogApi();
          logData.value.data = logData.value.data.reverse();
        }
        return {
          records: logData.value.data.slice(
            (page.currentPage - 1) * page.pageSize,
            page.currentPage * page.pageSize,
          ),
          total: logData.value.total,
        };
      },
    },
  },
  height: 'auto',
  pagerConfig: {
    pageSize: 15,
    pageSizes: [10, 15, 20, 50, 100],
    pagerCount: 10,
  },
};
/**
 * 表格的变量对象
 */
const [Grid] = useVbenVxeGrid({ gridOptions });
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="登录日志" table-title-help="主机SSH登录日志">
      <template #result="{ row }">
        <Tag :color="row.result === 'Accepted' ? 'green' : 'red'">
          {{ row.result }}
        </Tag>
      </template>
    </Grid>
  </Page>
</template>
